<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-03 09:29:07
-->
<template>
  <Modal
    ref="modal"
    v-bind="$attrs"
    class="u-common-model"
    :maskStyle="{'position': 'absolute'}"
    :maskClosable="$attrs['maskClosable'] || false"
    :wrapClassName="`u-dialog-wrap ${$attrs['wrap-class-name'] || ''}  ${$attrs['wrapClassName'] || ''}`"
    @cancel="close">
    <template #title>
      <slot name='title'></slot>
    </template>
    <!-- :getContainer="getContainer" -->
    <slot></slot>
    <template #footer>
      <Space>
        <slot name="footerBefore"></slot>
        <UIconButton
          itype="save"
          :loading="$attrs['confirmLoading']" 
          v-if="!hideBtns.includes('submit')"
          @click="toSubmit()">
          {{ $attrs['okText'] || '保存' }}
        </UIconButton>
        <slot name="footerCenter"></slot>
        <UIconButton
          v-if="!hideBtns.includes('close')"
          type="primary"
          ghost 
          danger
          @click="close">
          {{ $attrs['cancelText'] || '关闭' }}
        </UIconButton>
        <slot name="footerAfter"></slot>
      </Space>
    </template>
  </Modal>
</template>

<script lang='ts' setup>
import { ref, reactive, useAttrs } from 'vue' 
import { Space, Modal } from "ant-design-vue";
import UIconButton from './../button/PTypeButton.vue'
defineOptions({
  name: 'u-dialog'
})
interface Props {
  hideBtns?: Array,
  getContainer?: HTMLElement,
  fullScreen?: boolean,
  beforeClose?: Function,
}
const props = withDefaults(defineProps<Props>(),
  {
    hideBtns: [],
    fullScreen: false
  }  
)

const attrs = useAttrs();
const emits = defineEmits(['update:open', 'cancel', 'submit', 'close']);

const modal = ref(null);
defineExpose({
  modal
})

const toSubmit = () => {
  // setTimeout(() => {
  // }, 500)
  emits('submit')
}

const getContainer = () => {
  let activePane: HTMLElement = document.querySelector('.ant-tabs-tabpane-active')
  if(props.getContainer) {
    return props.getContainer
  }
  else if(activePane) {
    return activePane
  }
  return document.body
}

// 弹窗关闭
const close = async () => {
  if(props.beforeClose) {
    await props.beforeClose()
  }
  emits('update:open', false)
  emits('cancel')
  emits('close')
}

</script>

<style lang='scss'>
.u-dialog-wrap {
  position: absolute !important;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
}
.full-modal {
  .ant-modal {
    max-width: 100%;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ant-modal-body {
    display: block;
    flex: 1;
    max-height: unset !important;
    overflow-y: auto;
    overflow-x: hidden
  }
}

.u-common-model {
  // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
  .ant-modal-header {
    position: relative;
    padding-bottom: 12px;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -24px;
      width: calc(100% + 48px);
      height: 1px;
      background-color: #D9D9D9;
    }
    .ant-modal-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      line-height: 28px;
      text-align: left;
    }
  }
  .ant-modal-content {
    padding-top: 12px;
    .ant-modal-body {
      max-height: calc(100% - 90px);
    }
  }
  .ant-modal-footer {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: -12px;
      left: -24px;
      width: calc(100% + 48px);
      height: 1px;
      background-color: #D9D9D9;
    }
  }
  .ant-tabs-nav {
    &::before {
      border-bottom: none;
    }
    .ant-tabs-ink-bar {
      height: 4px;
      border-radius: 4px 4px 0 0
    }
  }
}
</style>